import React from 'react'
import { Switch, Route, Redirect, withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { Icon, Menu, Button, message } from 'antd'
import Ledger from 'container/Ledger'
import LedgerDetail from 'container/LedgerDetail'
import NotFound from 'component/common/NotFound'
import Developing from 'component/common/Developing'

import LOGO_SVG from 'image/logo.png'
import HOME_SVG from 'image/menu/nav_btn_shouye.svg'
import MULU_SVG from 'image/menu/nav_btn_mulu.svg'
import style from './View.styl'

const { SubMenu, Item } = Menu

const routes = [
    {
        name: '基础配置',
        icon: HOME_SVG,
        path: 'config',
        subs: [
            {
                name: '组织维护',
                path: 'orgination',
            },
            {
                name: '用户管理',
                path: 'user',
            },
            {
                name: '角色管理',
                path: 'role',
            },
            {
                name: '权限管理',
                path: 'privilege',
            },
        ],
    },
    {
        name: '工作票任务',
        icon: MULU_SVG,
        path: 'task',
    },
    {
        name: '工作票台账',
        icon: MULU_SVG,
        path: 'ledger',
    },
]

const renderMenuItem = ({
    name, icon, path, subs,
}, parentPath = '') => (Array.isArray(subs) && subs.length > 0 ? (
    <SubMenu
        key={`sub-${parentPath}/${path}`}
        title={
            <span>
                <img src={icon} alt="" />
                <span className={style['menu-title']}>{name}</span>
            </span>
        }
    >
        {subs.map(item => renderMenuItem(item, `${parentPath}/${path}`))}
    </SubMenu>
) : (
    <Item key={`${parentPath}/${path}`}>
        <a href={`#${parentPath}/${path}`}>
            <img src={icon} alt="" className={style['menu-img']} />
            <span className={style['menu-title']}>{name}</span>
        </a>
    </Item>
))

class View extends React.Component {
    state = { loading: false }

    resetTicket = () => {
        this.setState({ loading: true })
        this.props.dispatch('devops.reset').then(res => {
            message.success('工作票重置成功！')
            this.setState({ loading: false })
        })
    }

    render() {
        const { location: { pathname } } = this.props
        const { loading } = this.state
        const selectedKeys = [pathname]
        if (/\/ledger\/(.+)/.test(pathname)) {
            selectedKeys.push('/ledger')
        }
        return (
            <div className={style.container}>
                <div className={style.header}>
                    <img src={LOGO_SVG} alt="" />
                    <div className={style.header_right}>
                        <div><Icon type="mail" /> 消息</div>
                        <div><Icon type="user" /> 王凯旋</div>
                        <a href="#/login"><Icon type="logout" rotate={-90} /> 退出</a>
                    </div>
                </div>
                <Menu
                    className={style.aside}
                    mode="inline"
                    theme="dark"
                    selectedKeys={selectedKeys}
                >
                    {routes.map(item => renderMenuItem(item))}
                </Menu>
                <div className={style.main}>
                    <Switch>
                        <Route exact={true} path="/login" render={() => <Developing key={pathname} />} />
                        <Route exact={true} path="/config/:type" render={() => <Developing key={pathname} />} />
                        <Route
                            exact={true}
                            path="/task"
                            render={() => (
                                <Developing key={pathname}>
                                    <Button
                                        loading={loading}
                                        type="danger"
                                        icon="redo"
                                        onClick={this.resetTicket}
                                        style={{ marginTop: 20 }}
                                    >重置工作票
                                    </Button>
                                </Developing>
                            )}
                        />
                        <Route exact={true} path="/ledger" render={() => <Ledger key={pathname} />} />
                        <Route exact={true} path="/ledger/:id" render={() => <LedgerDetail key={pathname} />} />
                        <Redirect exact={true} from="/" to="/ledger" />
                        <Route render={() => <NotFound key={pathname} />} />
                    </Switch>
                </div>
            </div>
        )
    }
}

export default withRouter(connect(state => ({
    ...state.app,
}))(View))
